<template>
  <div>
    <el-form ref="formSearch"
             :model="formSearch"
             label-width="100px"
             size="small"
             :inline="true">
      <el-form-item>
        <el-button type="primary"
                   size="small"
                   @click.stop="handleAdd()">添加</el-button>
      </el-form-item>
      <el-form-item label="物品类型:">
        <el-select v-model="formSearch.stutas"
                   placeholder="物品类型"
                   @change="searchSubmit">
          <el-option label="全部"
                     :value="-1"></el-option>
          <el-option label="耗材"
                     :value="0"></el-option>
          <el-option label="危险品"
                     :value="1"></el-option>
          <el-option label="其他"
                     :value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <avue-crud :option="tableOption"
               :data="tableData"
               :table-loading="tableLoading"
               :page="page"
               ref="crud"
               @current-change='currentChange'
               @size-change="sizeChange">
      <template slot-scope="scope"
                slot="menu">
        <el-button type="primary"
                   size="small"
                   plain
                   @click.stop="handleEdit(scope.row,scope.index)">修改</el-button>
        <el-button type="primary"
                   size="small"
                   plain
                   @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
      </template>
    </avue-crud>
    <!-- dialogTitle -->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogFormVisible"
               width="30%">
      <el-form ref="dialogForm"
               :model="dialogForm"
               :rules="rules"
               label-width="100px"
               label-position="left">
        <el-form-item label="物品类型:"
                      prop='type'>
          <el-select v-model="dialogForm.type"
                     placeholder="请选择"
                     style="width:100%">
            <el-option label="耗材"
                       :value="0"></el-option>
            <el-option label="危险品"
                       :value="1"></el-option>
            <el-option label="其他"
                       :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物品名称："
                      prop='name'>
          <el-input v-model="dialogForm.name"
                    placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="物品规格："
                      prop='spec'>
          <el-input v-model="dialogForm.spec"
                    placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="物品数量："
                      prop='num'>
          <el-input v-model="dialogForm.num"
                    placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer"
           style="text-align:center">
        <el-button size="small"
                   @click="dialogFormVisible = false">关 闭</el-button>
        <el-button type="primary"
                   size="small"
                   @click="handleAddLine('dialogForm')">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { goodsTableOption } from "@/const-personal/ledger/projectLedger.js"
import { validateAcquaintance, checkPhone, validatenull } from "@/util/validate.js"
import { getProjectArticleList, getProjectArticle, addProjectArticle, updProjectArticle, delProjectArticle } from "@/api/ledger/progect"
import { getStore } from '@/util/store'
export default {
  name: "项目物品",
  data () {
    return {
      projectId: getStore({ name: 'projectId' }),
      formSearch: {
        stutas: ''
      },
      tableOption: goodsTableOption,
      page: {
        total: 10, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
        pageSizes: [5, 10, 20]//
      },
      tableLoading: false,
      tableData: [],//数据
      // 修改新增
      dialogTitle: '添加检测项',
      dialogFormVisible: false,
      dialogForm: {},
      rules: {
        type: [{ required: true, message: '请选择物品类型', trigger: 'change' }],
        name: [{ required: true, message: '请输入物品名称', trigger: 'blur' }],
        spec: [{ required: true, message: '请输入物品规格', trigger: 'blur' }],
        num: [{ required: true, validator: validateAcquaintance, trigger: 'blur' }],
      },
    }
  },
  mounted () {
    this.searchSubmit();
  },
  methods: {
    //搜索
    searchSubmit () {
      let data = { type: this.formSearch.stutas == -1 ? null : this.formSearch.stutas ,
          projectListId :this.projectId}
      data.page = this.page.currentPage;
      data.size = this.page.pageSize;
      getProjectArticleList(data).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.page.total = res.data.data.total;
          this.page.currentPage = res.data.data.pageNum;
          this.page.pageSize = res.data.data.pageSize;
        } else {
          this.$notify.error({ title: '查询失败', message: '获取项目物品失败！', type: 'danger', });
        }
      })
    },
    //   添加
    handleAdd () {
      this.dialogTitle = '添加物品';
      this.dialogFormVisible = true;
      this.dialogForm = { type: '', name: '', num: null, spec: '' }
      this.$refs['dialogForm'].resetFields();
    },
    // 项目物品分页
    currentChange (page) {
      this.page.currentPage = page;
      this.searchSubmit();
    },
    sizeChange (val) {
      this.page.pageSize = val;
      this.searchSubmit();
    },
    // 删除
    handleDelete (row, index) {
      this.$confirm('删除后，（' + row.name + '）将无法找回, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //请求-删除
        delProjectArticle(row.id).then(res => {
          if (res.data.code == 200) {
            this.$notify({ title: '操作成功', type: 'success', message: '已成功删除（' + row.name + '）!' });
            this.dialogFormVisible = false;
            this.searchSubmit()
          } else {
            this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
          }
        })
      }).catch(() => {
        this.$notify({ title: '已取消删除', type: 'info', });
      });
    },
    // 修改
    handleEdit (row, index) {
      this.dialogTitle = '修改物品';
      getProjectArticle(row.id).then(res => {
        if (res.data.code == 200) {
          this.dialogForm = {
            name: res.data.data.name,
            num: res.data.data.quantity,
            spec: res.data.data.specification,
            type: res.data.data.type,
            id: res.data.data.id,
          }
          this.dialogFormVisible = true;
        } else {
          this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' });
        }
      })
    },
    // 确认新增/修改
    handleAddLine (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {            name: this.dialogForm.name,
            quantity: this.dialogForm.num,
            specification: this.dialogForm.spec,
            projectListId: this.projectId,
            type: this.dialogForm.type          }
          if (validatenull(this.dialogForm.id)) {
            addProjectArticle(data).then(res => {
              if (res.data.code == 200) {
                this.dialogFormVisible = false;
                this.$notify({ title: '操作成功', type: 'success', message: '添加成功!' });
                this.searchSubmit();
              } else {
                this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' });
              }
            })
          } else {
            data.id = this.dialogForm.id;
            updProjectArticle(data).then(res => {
              if (res.data.code == 200) {
                this.dialogFormVisible = false;
                this.$notify({ title: '操作成功', type: 'success', message: '修改成功!' });
                this.searchSubmit();
              } else {
                this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' });
              }
            })
          }
        }
      })
    },
  }
};
</script>
<style scoped>
</style>